import React, { Component } from 'react'

import {View} from "@tarojs/components";
import "./index.less"
import Chart from "./charts/charts";
import Taro from "@tarojs/taro";
import {regional} from "../api/opinion";
import getColorByIndex from "../utils/color";
import "./index.less"
import "./styleForm.less"
import {SPECIAL_REGION} from "./charts/echarts-map/region-data";



type Iprops={
  beginData: string,
  endData: string,
  keywords: string
}
interface Regional {
  props:Iprops
}





//定义地域统计类的组件
class Regional extends Component<any,any> {
constructor(props) {
  super(props);
  this.state={
    list:[]
  }
}


  setChartOptions(chart) {

    regional("2020-07-09","2020-10-29").then(res => {
      console.log(res)
      const data = res.data.data.map(item=>({name:item.word,value:item.number}))
      console.log(data)
      data.forEach(item=>{
        for(let city of SPECIAL_REGION){
          if(item.name.includes(city)){
            item.name=city;
            return;
          }
        }

        item.name=item.name.replace("省","").replace("市","")
      })
      let sortM = data.sort(data.value).slice(0,7)
      this.setState({
        list:sortM
      })
      console.log("444444444444444")
      console.log(this.state.list)
let max =0
      data.forEach(item=>{
        if(item.value>max){
          max=item.value
        }
      })

     const option = {
        // title: {
        //   text: 'USA Population Estimates (2012)',
        //   subtext: 'Data from www.census.gov',
        //   sublink: 'http://www.census.gov/popest/data/datasets.html',
        //   left: 'right'
        // },
       tooltip: {
         trigger: 'item',
         showDelay: 0,
         transitionDuration: 0.2,
         formatter: function (params) {
           let value;
           if (params.value) {
             value = (params.value + '').split('.');
           } else {
             value = '0';
           }
           value = value[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, '$1,');
           return params.seriesName + '\n' + params.name + ': ' + value;
         }
       },
       visualMap: {
         min: 0,
         max: max,
         top: 'middle',
         left: '6%',

         color: ['#d94e5d', '#eac736', '#50a3ba'],
         showLabel: false,
         textStyle: {
           color: '#fff'
         }
       },
        toolbox: {
          show: true,
          //orient: 'vertical',
          left: 'left',
          top: 'top',
          feature: {
            dataView: {readOnly: false},
            restore: {},
            saveAsImage: {}
          }
        },
       series: [
         {
           name: '地域统计',
           type: 'map',
           roam: false,
           map: 'china',
           left: '20%',
           emphasis: {
             label: {show: true},
           },
           itemStyle: {
             borderColor: '#fff',
           },
           // 文本位置修正
           textFixed: {
             Alaska: [20, -20]
           },
           data:data
         }
       ]
      };



      chart.setOption(option);
    })
  }







  render(){
    let height = Taro.pxTransform(500)
    const {list}=this.state
    return (
      <View>
        <View className="topTitle">
          地域统计
        </View>
        <Chart setChartOptions={this.setChartOptions.bind(this)} height={height}></Chart>

        <View className="box">
          <View className="formHeader">
            <View>排名</View>
            <View>地域</View>
            <View>信息数</View>
          </View>
          <View>
            {
              list.map((item,index)=>{
                return (
                  <View className="formFooter">
                    <View>{index+1}</View>
                    <View>{item.name}</View>
                    <View>{item.value}</View>
                  </View>
                )


              })
            }

          </View>
        </View>
      </View>
    )
  }
}

export default Regional
